<template>
<view @click="onClick" class="order-brief">
  <x-box :title="`订单号：${props.data.orderNo}`">
    <view slot="tools" class="x-text-primary">{{ props.data.orderStateDesc }}</view>
    <view class="x-container">
      <view class="body">
      <view class="tag x-small-top">{{props.data.orderTagDesc}}</view>
      <view class="x-small-top x-label">{{props.data.orderRemark}}</view>
      <view class="x-small-top x-small-bottom x-space-between">
        <view class="x-label">租期：{{props.data.leaseStartDate}}~{{props.data.leaseEndDate}}</view>
        <view class="money">{{format}}</view>
      </view>
      </view>
    </view>
  </x-box>
</view>
</template>

<script setup name="x-order-item">
import {computed} from "vue";
import {Constant} from "core";

const props = defineProps({
  data:{
    type: Object,
    default: () => {return {}}
  }
})

const onClick = () => {
  uni.navigateTo({url: `/pages/order/detail?orderNo=${props.data.orderNo}`})
}

const format = computed(() => {
  let label = Constant.PAY_CYCLE.filter(x => x.value == props.data.payCycle).map(x => {
    return x.label;
  })

  return props.data.termAmount + "/" + label + " " + "(" + props.data.leaseTerm + "期)";
})

</script>

<style scoped lang="less">
  .order-brief {
    background-color: #fff;
    padding-bottom: 10rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .body {
      border-top: 1px solid #eeeeee;
    }

    .tag {
      font-size: 36rpx;
      color: #666666;
      font-weight: bold;
    }

    .money {
      font-size: 28rpx;
      color: @primary;
    }
  }
</style>
